<!-- src/views/Home.vue -->
<template>
    <div class="container">
      <sideBar></sideBar>
      <main class="content">
        <!-- <Top></Top> -->
        <div class="myWork_top">
            <h1>我的创作</h1>
            <div class="search">
              <input type="text" 
                v-model="searchKeyword" 
                placeholder="搜索作品"
              >
              <button @click="onSearchInput">搜索</button>
            </div>
        </div>
        <div class="contentIn">

          <div v-if="userState.musicList.length" class="show_type">
            <button type="button" @click="tabShowType(0)" :class="{ active: showType == 0 }"></button>
            <button type="button" @click="tabShowType(1)" :class="{ active: showType == 1 }"></button>
          </div>

          <div v-if="userState.musicList.length" class="my_work_list">
            <ul class="my_work" v-show="showType === 1">
              <li v-for="(item, index) in filteredMusicList" :key="item.id">
                <div class="work_pic">
                  <img :src="item.image_url" src="../images/myWrok_defalut.png" alt="">
                </div>
                <div class="work_right">
                    <!-- <p class="work_name">{{ item.display_name }}</p> -->
                    <p class="work_autor">{{ userState.username }}</p>
                    <p class="work_type">
                      <!-- <span>{{ item.metadata.gpt_description_prompt }}</span> -->
                    </p>
                </div>
              </li>
            </ul>

            <div class="work_list_warp">
              <div class="show_lyric_area">
                <textarea v-show="lyricText !== 'instrumental'" name="" id="" :value="lyricText"></textarea>
                <div v-show="lyricText === 'instrumental'">{{ lyricText }}</div>
              </div>
              <div class="show_music_area">
                <div
                  class="work_list"
                  v-show="showType === 0"
                  v-for="(item, index) in filteredMusicList" 
                  :key="item.id"
                >
                  <workList
                  :showDel="true"
                  :audioData = item
                  :audioSrc = "item.audio_url" 
                  :auidoImg = "item.image_url"
                  :playIndex = "index"
                  @play="handlePlay(index)"
                  :musicId = "item.id"
                  @like="handleLike"
                  :isCreateFinish="createFinish"
                  @showLyric="showlyricFn"
                  ></workList>
                </div>
              </div>
            </div>

            
          </div>
          <div v-if="!userState.musicList.length" class="no_work">
            <div class="no_workIn">
              <div class="musical_note_box">
                <img src="../images/musical_note.svg" alt="">
              </div>
              <p>您无作品、快去创作吧～</p>
              <router-link tag="a" :to="'/aimusic'" class="to_aimusic" >前往AI作曲</router-link>
            </div>
          </div>

        </div>
      </main>
    </div>
  </template>
  
  <script setup>
  // 如果需要在 Home 页面处理逻辑可以在这里写
  import Top from '../components/top.vue';
  import { ref, reactive, provide, computed } from 'vue'
  import sideBar from '../components/sideBar.vue';
  import { useUserStore } from '../store/user'
  import workList from '../components/workList.vue';
  const { userState } = useUserStore()

  let creatingMusic = ref(null)
  let showType = ref(0)
  let searchKeyword = ref('')
  let lyricText = ref('')

    // setTimeout(() => {
    //   userState.isShowLogin = false
    // },1000)
  
  // if ( !userState.token ) {
  //   setTimeout(() => {
  //     userState.isShowLogin = false
  //   },1000)
  // }

  // 搜索框筛选关键字
  const filteredMusicList = computed(() => {
    if (!searchKeyword.value.trim()) {
      return userState.musicList;
    }
    return userState.musicList.filter(item =>
      item.display_name?.toLowerCase().includes(searchKeyword.value.toLowerCase())
    );
  });


  function showlyricFn(lyric) {
    console.log(lyric)
    if (lyric==='instrumental') {
      lyricText.value = '纯音乐'
    } else {
      lyricText.value = lyric
    }
  }


  function tabShowType(index) {
    showType.value = index
  }

  provide('createFinish', createFinish)
  function createFinish(str) {
    creatingMusic.value = false
  }

  function handlePlay(index) {
    console.log('userState.playIndex:', userState.playIndex)
    console.log('index:',index)
    if( userState.playIndex === index ) {
      userState.playIndex = null
    } else {
      userState.playIndex = index
    }
  }

  function handleLike(id) {
    console.log(id)
  }

  </script>
  
  <style scoped>
  .container {
    display: flex; 
    min-height: 100vh; 
    background: linear-gradient(180deg, rgba(30, 30, 64, 1) 0%, rgba(32, 32, 50, 1) 100%);
  }

  .contentIn {
    padding-top: 10px;
  }
  
  .sidebar {
    width: 200px; 
    background: linear-gradient(180deg, rgba(42, 42, 65, 1) 0%, rgba(71, 73, 83, 1) 100%);
    color: white; 
    padding: 10px;
    box-sizing: border-box;
    min-height: 100vh; /* 最小高度为视口高度，确保撑满 */
  }

  

  .my_work_list {
    width: 100%;
    height: calc(100vh - 140px);
    overflow-y: scroll;
  }

  .show_type {
    width: 100%;
    height: 40px;
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .show_type button{
    width: 28px;
    height: 28px;
    border: 1px solid #FFF;
    border-radius: 5px;
    opacity: .5;
    transition: .5s;
  }

  .show_type button.active, .show_type button:hover {
    opacity: 1;
  }

  .show_type button:nth-child(1) {
    background: url(../images/icon_list.png) no-repeat center;
    background-size: 70%;
  }

  .show_type button:nth-child(2) {
    background: url(../images/icon_list_pic.png) no-repeat center;
    background-size: 70%;
  }
  
  .content {
    flex: 1; /* 自动填充剩余空间 */
    overflow-y: auto; /* 允许垂直滚动 */
  }

  .myWork_top {
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    box-sizing: border-box;
  }

  .myWork_top h1 {
    color: #FFF;
    font-size: 36px;
  }

  .myWork_top .search{
    width: 397px;
    height: 42px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .myWork_top .search input{
    width: 300px;
    height: 40px;
    border: 1px solid #666;
    border-right: none;
    background: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    flex: 1;
    padding-left: 10px;
    font-size: 16px;
    color: #FFF;
  }

  .myWork_top .search button{
    width: 90px;
    height: 100%;
    border: none;
    background-color: #e13f97;
    font-size: 18px;
    color: #FFF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .my_work {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
  }

  .my_work li {
    width: 31.5%;
    height: 120px;
    border-radius: 10px;
    background: linear-gradient(0deg, rgba(251, 211, 141, 0) 0%, rgba(251, 211, 141, 0.2) 100%), radial-gradient(closest-side, rgba(48, 49, 69, 1) 0%, rgba(65, 67, 80, 1) 100%);
    position: relative;
    overflow: hidden;
    padding:20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .my_work li::before{
    content: '';
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
    opacity: 0.26;
    width: 173.59px;
    height: 234.73px;
    position: absolute;
    /* left: 428.59px; */
    right: -30px;
    top: -62px;
    transform-origin: 0 0;
    transform: rotate(21.386deg) scale(1, 1);
  }

  .my_work li:after{
    content: '';
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
    width: 124px;
    height: 234.73px;
    position: absolute;
    /* left: 548.59px; */
    right: -120px;
    top: -50px;
    transform-origin: 0 0;
    transform: rotate(21.386deg) scale(1, 1);
  }

  .my_work li .work_pic {
    width: 82px;
    height: 82px;
    min-width: 82px;
  }

  .my_work li .work_pic img {
    width: 100%;
    height: 100%;
  }
  .work_right {
    height: 100%;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 2px 0 0 10px;
    box-sizing: border-box;
    flex: 1;
    gap: 4px;
  }
  .work_name {
      font-size: 16px;
      color: #FFF;

  }
  .work_autor {
    padding-left: 20px;
    background: url(../images/icon_head.png) no-repeat center left;
    background-size: 14px;
    font-size: 14px;
    color: #FFF;
  }
  .work_type {
    opacity: .5;
    color: #FFF;
    font-size: 14px;
    margin-top: 8px;
  }  

  .work_type span {
    margin-right: 10px;
  }

  .work_list_warp{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
  }

  .show_lyric_area {
    width: 300px;
    height: 100%;
  }

  .show_lyric_area textarea {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  .show_music_area {
    flex: 1;
  }

  .work_list {
    margin-bottom: 20px;
    border-radius: 10px;
  }



  .no_work {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .no_workIn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .musical_note_box {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.17);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .no_workIn p {
    font-size: 32px;
    font-weight: 200;
    color: #FFF;
    margin: 20px 0;
  }

  .no_workIn .to_aimusic {
    padding: 10px;
    font-size: 24px;
    border-radius: 5px;
    background-color: rgba(243, 50, 75, 0.78);
    color: #FFF;
  }

 
  </style>
  